<template>
<div>
  <div class="container">
<!--    头部区域-->
    <div class="header">
      <div style="width: 1300px;margin: 0 auto">
        <div class="header-text" style="font-size: 35px;">
        投资工具
      </div>
      <div class="header-content">
        提供市场快讯、财经日历等行情实时查询工具，与金提供市场快讯、财经日历等行情实时查询工具，与金提供市场快讯、财经日历等行情实时查询工具，与金提供市场快讯、财经日历等行情实时查询工具，与金
      </div>
      </div>
      
    </div>
<!--    内容区域-->
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane style="height:;overflow-y:auto;overflow-x:hidden;" label="财经日历" name="first">
           <calendar></calendar> 
        </el-tab-pane>
        <el-tab-pane style="height:;overflow-y:auto;overflow-x:hidden;" label="市场快讯" name="second">
          <flash></flash>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</div>
</template>

<script>
import calendar from '@/views/market/calendar'
import flash from '@/views/market/flash'
export default {
  name: 'marketIndex',
  data () {
    return {
      activeIndex: '1',
      activeName: 'first'
    }
  },
  components: {
    calendar,
    flash
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
 .container {
   .header {
     height: 230px;
     background-image: linear-gradient(to bottom, #002748 0%, #002748 30%, #294c69 70%, #294c69 100%);
     color: #ffffff;
     .header-text {
       //padding: 80px 150px 20px;
       padding-top: 80px;
       padding-bottom: 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 28px;
       //background-color: pink;
     }

     .header-content {
      width: 800px;
       display: flex;
       align-items: center;
       text-align: left;
      // padding: 0 150px 30px;
       padding-bottom: 30px;
       font-size: 14px;
       line-height: 20px;
       //background-color: skyblue;
     }
   }

   .content {
    background-color: #f4f7fe;
    //background-color: pink;
     height: 650px;
     .item {
      // padding: 10px 150px 5px;
     }
   }
 }

 ::v-deep .el-tabs__nav-scroll {
   background-color: #ffffff !important;
   padding: 5px 10px  0 !important;
  // margin: 10px 150px 5px !important;
   width: 1300px;
   margin: 0 auto;
 }
 ::v-deep .el-tabs__nav-wrap::after {
   background-color: #f4f7fe !important;
 }
 ::v-deep .el-tabs__header {
   margin: 0 0 5px;
 }
 ::v-deep .el-tabs__item.is-active {
   color: #333333;
   font-weight: bold;
 }
 ::v-deep .el-tabs__active-bar {
   background: #333333;
 }
 /* 鼠标选中时样式 */
 ::v-deep .el-tabs__item.is-active {
   color: #333333;
   opacity: 1;
 }
 /* 鼠标悬浮时样式 */
 ::v-deep .el-tabs__item:hover {
   color: #333333;
   cursor: pointer;
   opacity: 1;
 }

 ::v-deep .el-tabs__item {
  // background-color: skyblue;
  font-size: 16px;
  font-weight: 100;
  color: #333333;
  text-align: center;
  width: 120px;
}
</style>
